﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="canyu.aspx.cs" Inherits="MxWeiXinPF.Web.weixin.toupiao.canyu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta name="Keywords" content="" />
    <meta name="Description" content=" " />
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        body {
            background: #fff;
            border: 6px solid #e40080;
        }

        .back {
            margin: 0px auto;
            width: 80%;
            color: #e40080;
        }

            .back > div {
                margin: 10px 0px;
            }

                .back > div > input[type=text] {
                    border: 0px;
                    height: 40px;
                    -webkit-animation: none;
                    border-radius: 10px;
                }

                .back > div > input[type=text], textarea {
                    background-color: #e40080;
                }

                .back > div > span {
                    display: block;
                    width: 80px;
                    height: 100%;
                    float: left;
                }

                .back > div > textarea {
                    border-radius: 10px;
                    border: 0px;
                    height: 100px;
                }

                .back > div > .upload {
                    width: 15%;
                }


        .river {
            height:40px;
            clear: both;
        }



        .mark {
            color: red;
            font-size: 14px;
        }
    </style>
    <script src="../../scripts/jquery/jquery-2.1.0.min.js"></script>
    <script src="js/helper_min.js"></script>
    <script src="js/layer.m.js"></script>
    <script type="text/javascript">
        $(function () {
            var upload = $(".upload");
            var thi = $("#uploadFile");
            var imgurl = "";

            //设置样式
            var backdiv = $(".back > div");
            var kwidth = (backdiv.width() - 82).toString();
            $(".back > div > input[type=text], textarea").css({
                "width": kwidth
            });
            $("#shili").width(kwidth);



            //点击上传
            upload.click(function () {
                thi.click();
            });

            //上传
            thi.change(function () {
                layer.open({
                    type: 2,
                    content: '图片上传中'
                });

                var req = {
                    header_img_id: thi.get(0).files[0],
                    form_action: "getdata.ashx?mycat=uploadImg"
                };
                var xhr = window.ajax2(req.form_action, {
                    type: "POST",
                    async: true,
                    data: req,
                    timeout: 10000 * 6,
                    callback: function (data) {
                        if (data.res == 1) {
                            upload.attr("src", data.thumb);
                            imgurl = data.newPhotoUrl;
                            upload.removeClass("upload");
                            upload.css({ "width": kwidth });
                            $("#bm_submit").css({ "margin-left": "40%" });
                            //关闭
                            layer.closeAll();
                        }
                    },
                });
            })
            var lock = true;
            //信息填写完成参与
            $("#bm_submit").click(function () {
                if (lock) {
                    var ck = /^[1]+[3,5,8,7]+\d{9}$/;
                    var name = $("#xs_name").val();
                    var tel = $("#xs_tel").val();
                    var miaoshu = $("#xs_miaoshu").val();

                    if (name == '') {
                        myalert("请告诉我们您的名字");
                        return;
                    }
                    if (tel == '') {
                        myalert("您需要填写手机号码");
                        return;
                    }
                    if (!ck.test(tel)) {
                        myalert("抱歉，您手机号码格式不正确");
                        return;
                    }
                    if (imgurl == '') {
                        myalert("您需要一张照片");
                        return;
                    }
                    if (miaoshu == '') {
                        myalert("为您的照片说几句吧");
                        return;
                    }

                    var req = {
                        wid:<%=wid%>,
                        actid:<%=aid%>,
                        openid:"<%=openid%>",
                        name: name,
                        tel: tel,
                        miaoshu: miaoshu,
                        imgurl: imgurl
                    };
                    lock = false;
                    $.post("getdata.ashx?mycat=addCanyu", req, function (data) {
                        if (data.res == 1) {
                            myalert("报名成功，请等待审核");
                            setTimeout(function () {
                                location.href = "index.aspx?wid=<%=wid%>&aid=<%=aid%>";
                            }, 1000);
                        } else {
                            myalert("抱歉，不可参与");
                        }
                    }, "json");
                }
            });
        });

        function myalert(txt) {
            //提示框
            layer.open({
                content: txt,
                btn: ["知道了"]
            });
        }

       
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="file" style="opacity: 0; position: absolute; top: -100px" id="uploadFile" accept="image/jpeg, image/jpg, image/png" single="" />
        <div class="back">
            <div style="line-height:40px;">
                <span>您的姓名：</span><input type="text" id="xs_name" />
            </div>
            <div>
                <span>您的电话：</span><input type="text" id="xs_tel" />
            </div>
            <div>
                <span>照片描述：</span><textarea id="xs_miaoshu"></textarea>
            </div>
            <div>
                <span>上传图片：</span><img class="upload" src="images/upImg.jpg" />
                <img src="images/bm_submit.jpg" id="bm_submit" width="32%" />
            </div>
            <div class="mark">注:照片提交,通过审核后即会出现在首页</div>
            <div>
                <span>示例照片：</span><img src="images/shili_img.jpg" id="shili" />
            </div>
            <div class="river"></div>
        </div>

    </form>
</body>
</html>
